<template>
  <div>
<!--    询问是否从已有数据中读取 对话框-->
    <v-dialog
      v-model="checkDialog"
      max-width="500"
      transition="dialog-top-transition"
    >
      <v-card class="ZZGF-font-bold" rounded="xl">
        <v-card-title class="text-h7">
          是否读取已有模型数据？
        </v-card-title>

        <v-card-text>
          识别到该创新引导曾保存过模型数据，是否读取后继续编辑？
          <br>
          若选择否，您可以重新进行建模。
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            color="#965454"
            text
            @click="checkDialog = false"
          >
            否
          </v-btn>

          <v-btn
            color="main_1"
            text
            @click="loadGraph"
          >
            是
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
<!--工具栏-->
    <v-card
      elevation="1"
      style="height: 100vh; width: 100%;
              padding-left: 30px;
              padding-right:30px;
              border-bottom: #efefef solid 1px;
              color: #555555;
              font-size: 12px;">
<!--      工具按钮栏-->
      <div style="padding-top: 20px; width: 1010px;">
        <v-row no-gutters>
<!--          功能/部件栏-->
          <v-col cols="12" lg="4">
            <v-card class="pa-2" outlined tile>
              <v-row justify-lg="space-between">
<!--                按钮1-->
                <v-col cols="12" lg="3" style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA"
                             @click.stop="showAddNodeModel">
                        <v-icon>
                          mdi-plus-box
                        </v-icon>
                      </v-btn>
                    </template>
                    <span class="song-font">新增功能/部件</span>
                  </v-tooltip>
                </v-col>
<!--                按钮2-->
                <v-col cols="12" lg="3" style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA"
                             @click.stop="showEditNodeModel" :disabled="!selectingNode">
                        <v-icon>
                          mdi-pencil
                        </v-icon>
                      </v-btn>
                    </template>
                    <span class="song-font">编辑功能/部件</span>
                  </v-tooltip>
                </v-col>
<!--                按钮3-->
                <v-col cols="12" lg="3" style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA"
                             @click="showPostpositionModel" :disabled="!selectingNode">
                        <v-icon>
                          mdi-source-branch-plus
                        </v-icon>
                      </v-btn>
                    </template>
                    <span class="song-font">产生新功能/部件</span>
                  </v-tooltip>
                </v-col>
<!--                按钮4-->
                <v-col cols="12" lg="3" style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <a-popconfirm
                        placement="bottomRight"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="removeNode">
                        <template slot="title">
                          <p class="song-font">确定删除吗？</p>
                        </template>
                        <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA" :disabled="!selectingNode">
                          <v-icon>
                            mdi-delete-forever-outline
                          </v-icon>
                        </v-btn>
                      </a-popconfirm>
                    </template>
                    <span class="song-font">删除功能/部件</span>
                  </v-tooltip>
                </v-col>
<!--                对话框-->
                <v-dialog v-model="visible" max-width="600" transition="dialog-top-transition">
                  <v-card rounded="xl">
                    <v-card-title class="text-sm-h6">编辑功能/部件</v-card-title>
                    <br>
                    <v-card-text>
                      <div class="song-font-bold">
                        <a-input-group compact>
                          <a-input style="width: 90%" v-model="nodeName" :maxLength="8"
                                   addonBefore="功能/部件名称" placeholder="名称不超过八个字"/>
                        </a-input-group>
                        <br>
                        <a-radio-group v-model="radio" >
                          <span>&nbsp;该功能对于系统整体而言是&emsp;</span>
                          <a-radio :value="1">
                            有用功能/部件
                          </a-radio>
                          <a-radio :value="2">
                            有害功能/部件
                          </a-radio>
                        </a-radio-group>
                      </div>
                    </v-card-text>
                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn color="#965454" text @click="visible = false">取消</v-btn>
                      <v-btn color="main_1" text @click="handleAddNode">确定</v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </v-row>
<!--              栏名-->
              <v-row justify-lg="center" style="padding-bottom: 5px">
                <span class="song-font-bold">功能/部件</span>
              </v-row>
            </v-card>
          </v-col>
<!--          关联栏-->
          <v-col cols="12" lg="2">
            <v-card class="pa-2" outlined tile>
              <v-row justify-lg="space-between">
<!--                按钮1-->
                <v-col cols="12" lg="6" style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA"
                             @click.stop="showAddRelationModel" :disabled="!selectingNode">
                        <v-icon>
                          mdi-relation-one-to-one
                        </v-icon>
                      </v-btn>
                    </template>
                    <span class="song-font">建立产生关系</span>
                  </v-tooltip>
                </v-col>
<!--                按钮2-->
                <v-col cols="12" lg="6" style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <a-popconfirm
                        placement="bottomRight"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="removeRelation">
                        <template slot="title">
                          <p class="song-font">确定删除吗？</p>
                        </template>
                        <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA" :disabled="!selectingLine">
                          <v-icon>
                            mdi-source-branch-remove
                          </v-icon>
                        </v-btn>
                      </a-popconfirm>
                    </template>
                    <span class="song-font">删除关系</span>
                  </v-tooltip>
                </v-col>
<!--                对话框-->
                <v-dialog v-model="selectVisible" max-width="500" transition="dialog-top-transition">
                  <v-card rounded="xl">
                    <v-card-title class="text-sm-h6">
                      建立产生关系
                    </v-card-title>
                    <br>
                    <v-card-text>
                      <div class="song-font-bold" style="padding-bottom: 3vh">
                        <a-select
                          label-in-value
                          :value="selectedNodes"
                          @change="handleChange"
                          mode="multiple"
                          showArrow
                          notFoundContent='暂无可作为当前功能/部件的后置功能/部件'
                          placeholder="请选择由该功能/部件产生的后置功能/部件"
                          style="width: 400px"
                        >
                          <a-icon slot="suffixIcon" type="smile" />
                          <a-select-option v-for="item in filteredOptions" :key="item" :value="item.id">
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </div>
                    </v-card-text>
                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn color="#965454" text @click="selectVisible = false">取消</v-btn>
                      <v-btn color="main_1" text @click="addNewRelation">确定</v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </v-row>
<!--              栏名-->
              <v-row justify-lg="center" style="padding-bottom: 5px">
                <span class="song-font-bold">关联</span>
              </v-row>
            </v-card>
          </v-col>
<!--          显示栏-->
          <v-col cols="12" lg="3">
            <v-card class="pa-2" outlined tile>
              <v-row justify-lg="space-between">
                <v-col style="text-align: center">
<!--                  显示栏按钮组-->
                  <v-btn-toggle tile color="main_1" group dense mandatory>
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn v-bind="attrs" v-on="on" @click="showNodes('all')" width="25%">
                          <span style="color: #2C2E2D">
                            ALL
                          </span>
                        </v-btn>
                      </template>
                      <span class="song-font">显示所有功能/部件</span>
                    </v-tooltip>
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn v-bind="attrs" v-on="on" @click="showNodes('useful')" width="35%">
                          <span style="color: #89B8CA">
                            USEFUL
                          </span>
                        </v-btn>
                      </template>
                      <span class="song-font">显示有用功能/部件</span>
                    </v-tooltip>
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn v-bind="attrs" v-on="on" @click="showNodes('harmful')" width="40%">
                          <span style="color: #CA8989">
                            HARMFUL
                          </span>
                        </v-btn>
                      </template>
                      <span class="song-font">显示有害功能/部件</span>
                    </v-tooltip>
                  </v-btn-toggle>
                </v-col>
              </v-row>
<!--              栏名-->
              <v-row justify-lg="center" style="padding-bottom: 5px">
                <span class="song-font-bold">显示</span>
              </v-row>
            </v-card>
          </v-col>
<!--          重置栏-->
          <v-col cols="12" lg="1">
            <v-card class="pa-2" outlined tile>
              <v-row justify-lg="space-between">
<!--                按钮1-->
                <v-col style="text-align: center">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <a-popconfirm
                        placement="bottomRight"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="reset">
                        <template slot="title">
                          <p class="song-font">确定重置吗？</p>
                        </template>
                        <v-btn v-bind="attrs" v-on="on" icon tile color="#89B8CA">
                          <v-icon>
                            mdi-reload
                          </v-icon>
                        </v-btn>
                      </a-popconfirm>

                    </template>
                    <span class="song-font">重置功能模型图</span>
                  </v-tooltip>
                </v-col>
              </v-row>
<!--              栏名-->
              <v-row justify-lg="center" style="padding-bottom: 5px">
                <span class="song-font-bold">重置</span>
              </v-row>
            </v-card>
          </v-col>
        </v-row>
      </div>
<!--      提醒组件-->
      <div>
        <v-alert
          color="orange"
          dense
          icon="$mdiAccount"
          prominent
          shaped
          text
          :value="conAlert"
        >
          出现<strong>{{ conType }}</strong>冲突点：<strong>{{ conNode }}</strong>
        </v-alert>
      </div>

<!--    作图工具    -->
      <v-row>
        <div style="width: calc(100% - 20px); height:calc(100vh - 100px); padding-top: 20px">
          <SeeksRelationGraph
            ref="seeksRelationGraph"
            :options="graphOptions"
            :on-node-click="onNodeClick"
            :on-line-click="onLineClick"
          />
        </div>
      </v-row>
    </v-card>
  </div>
</template>

<script>
  import SeeksRelationGraph from 'relation-graph'
  import request from "../utils/request";

  export default {
    name: 'GuideGraphTool',
    components: {
      SeeksRelationGraph
    },
    data() {
      return {
        checkDialog: false,
        conAlert: false,
        nodeName: '',
        radio: '',
        type: -1,
        conNode: '',
        conType: '',
        graphs: {
          'rootId': 'root',
          'nodes': [],
          'links': []
        },
        tmpGraphs: {
          'rootId': 'root',
          'nodes': [],
          'links': []
        },
        selectableNodes: [],
        selectedNodes: [],
        currentNode: {},
        currentLink: {},
        visible: false,
        selectVisible: false,
        selectingNode: false,
        selectingLine: false,
        demoname: '---',
        graphOptions: {
          allowSwitchLineShape: true,
          defaultNodeBorderColor: '#FFFAF4',
          defaultNodeBorderWidth: 4,
          allowSwitchJunctionPoint: true,
          defaultLineShape: 1,
          defaultLineColor: '#d8caaf',
          'layouts': [
            {
              'label': '自动布局',
              'layoutName': 'force',
              'layoutClassName': 'seeks-layout-force'
            }
          ],
          defaultJunctionPoint: 'border'
          // 这里可以参考"Graph 图谱"中的参数进行设置
        }
      }
    },
    computed: {
      filteredOptions() {
        return this.selectableNodes.filter(o => !this.selectedNodes.includes(o));
      },
    },

    created() {
      this.selectingNode = false
      this.selectingLine = false
      this.load()
    },
    activated() {
      this.selectingNode = false
      this.selectingLine = false
      this.$refs.seeksRelationGraph.refresh()
      this.load()
    },
    mounted() {
      this.demoname = this.$route.params.demoname
      this.setGraphData()
      let jsonObj = JSON.parse(sessionStorage.getItem('graph'))
      this.$refs.seeksRelationGraph.setJsonData(this.getUsableData(jsonObj))
      this.graphs = this.getUsableData(jsonObj)
      this.$refs.seeksRelationGraph.refresh()
    },
    methods: {
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {
          this.confirm()
        }
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          this.confirm()
        }
      },
      confirm(){
        if (sessionStorage.getItem('guideId'))
          sessionStorage.removeItem('guideId')
        if (sessionStorage.getItem('graph'))
          sessionStorage.removeItem('graph')
        if (sessionStorage.getItem('selectableNodes'))
          sessionStorage.removeItem('selectableNodes')
        this.$router.push('/personal/guide')
      },
      async load(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code === '200'){
            let id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            request.get("/guide/" + id).then(res => {
              if (res.code === '200' && res.data.model !== null) {
                this.checkDialog = true
                this.tmpGraphs = JSON.parse(res.data.model)
              }
            })
          }
          else this.confirm()
        })
      },
      loadGraph(){
        this.$refs.seeksRelationGraph.setJsonData(this.getUsableData(this.tmpGraphs))
        this.graphs = this.tmpGraphs
        sessionStorage.setItem('graph', JSON.stringify(this.tmpGraphs))
        this.checkDialog = false
      },
      getUsableData(jsonObj){
        let newObj = { rootId: 'root', nodes: [], links: []}
        if (jsonObj.nodes){
          for (let i = 0; i < jsonObj.nodes.length; i++){
            let keyValue = "";
            let jsonStr = "";
            for (const key in jsonObj.nodes[i]) {
              if (key !== 'flated'){
                keyValue += key + ':"' + jsonObj.nodes[i][key] + '",'
              }
            }
            keyValue = keyValue.substring(0,keyValue.length - 1);
            jsonStr = "{" + keyValue + "}";
            newObj.nodes.push(eval('(' + jsonStr + ')'))
          }
        }
        if (jsonObj.links){
          for (let i = 0; i < jsonObj.links.length; i++){
            let keyValue = "";
            let jsonStr = "";
            for (const key in jsonObj.links[i]) {
              keyValue += key + ':"' + jsonObj.links[i][key] + '",'
            }
            keyValue = keyValue.substring(0,keyValue.length - 1);
            jsonStr = "{" + keyValue + "}";
            newObj.links.push(eval('(' + jsonStr + ')'))
          }
        }
        return newObj
      },
      setGraphData() {
        let init_graph_data = {
          rootId: 'root',
          nodes: [{id: 'root', name: '你的发明创造', color: '#c9c0d3', nodeShape: 1, width: 130, height: 60}],
          links: []
        }
        this.$refs.seeksRelationGraph.setJsonData(init_graph_data, (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
          this.graphs = init_graph_data

        })
      },
      reset(){
        this.selectingNode = false
        this.setGraphData()
        sessionStorage.setItem('graph', JSON.stringify(this.graphs))
      },

      onNodeClick(nodeObject) {
        const graph = this.$refs.seeksRelationGraph
        this.$notification.open({
          type: 'success',
          message: '选择节点：' + nodeObject.text
        })
        this.currentNode = nodeObject

        this.selectingNode = this.currentNode.id !== 'root'
        this.selectingLine = false

        let posNodes = this.getPosNodes(nodeObject)
        let frontNodes = this.getFrontNodes(nodeObject)

        this.selectableNodes = []

        // 找可建立关系节点
        for (let i = 0; i < this.graphs.nodes.length; i++){
          let nodeItem = {}
          if (this.graphs.nodes[i].id !== 'root' && this.graphs.nodes[i].id !== nodeObject.id
            && !this.array_contain(posNodes, this.graphs.nodes[i].id)
            && !this.array_contain(frontNodes, this.graphs.nodes[i].id)
          )
          {
            nodeItem.id = this.graphs.nodes[i].id
            nodeItem.label = graph.getNodeById(nodeItem.id).text
            this.selectableNodes.push(nodeItem)
          }
        }
        sessionStorage.setItem('selectableNodes', JSON.stringify(this.selectableNodes))
        this.selectableNodes = []
      },

      onLineClick(lineObject) {
        this.selectingLine = true
        this.selectingNode = false
        this.currentLink = lineObject
        this.$notification.open({
          type: 'success',
          message: '选择关系：' + lineObject.fromNode.text + ' ' + lineObject.relations[0].text + ' ' + lineObject.toNode.text
        })
      },
      removeNode(){
        let tmpNodes = []
        for (let i = 0; i < this.graphs.nodes.length; i++){
          if (this.currentNode.id !== this.graphs.nodes[i].id){
            tmpNodes.push(this.graphs.nodes[i])
          }
        }
        this.graphs.nodes = tmpNodes
        for (let i = 0; i < this.graphs.links.length; i++){
          if (this.currentNode.id === this.graphs.links[i].from){
            this.graphs.links[i].from = 'root'
            this.graphs.links[i].isHide = true

            // 删除后自动把悬浮点挂在根节点上
            // this.graphs.links[i].text = '需要'
          }
          if (this.currentNode.id === this.graphs.links[i].to){
            this.graphs.links[i].to = 'root'
            this.graphs.links[i].isHide = true
          }
        }
        this.$refs.seeksRelationGraph.setJsonData(this.getUsableData(this.graphs))
        sessionStorage.setItem('graph',JSON.stringify(this.getUsableData(this.graphs)))
        this.selectingNode = false
        // this.selectingLine = false
      },

      removeRelation(){
        for (let i = 0; i < this.graphs.links.length; i++){
          if (this.currentLink.fromNode.id === this.graphs.links[i].from
            && this.currentLink.toNode.id === this.graphs.links[i].to){
            this.graphs.links[i].isHide = true
          }
        }
        this.$refs.seeksRelationGraph.setJsonData(this.getUsableData(this.graphs))
        sessionStorage.setItem('graph',JSON.stringify(this.getUsableData(this.graphs)))
        this.selectingLine = false
      },

      showNodes(nodeType) {
        const graph = this.$refs.seeksRelationGraph
        for (let i = 0; i < this.graphs.nodes.length; i++){
          graph.getNodeById(this.graphs.nodes[i].id).opacity = 1
        }
        let avilColor = ''
        if (nodeType === 'useful')
          avilColor = '#ca8989'
        else if (nodeType === 'harmful')
          avilColor = '#89B8CA'

        for (let i = 0; i < this.graphs.nodes.length; i++){
          if (this.graphs.nodes[i].color === avilColor){
            graph.getNodeById(this.graphs.nodes[i].id).opacity = 0.3
          }
        }
      },

      addPostposition() {
        if (this.nodeName === '' || this.radio === ''||this.nodeName.split(" ").join("").length === 0){
          this.$message.error('请完善节点信息');
          return
        }
        for (let i = 0; i < this.graphs.nodes.length; i++){
          if (this.nodeName === this.graphs.nodes[i].name){
            this.$message.error('该功能部件已存在');
            return
          }
        }
        const graph = this.$refs.seeksRelationGraph;
        let node_color = '';
        if (this.radio === 1)
          node_color = '#89B8CA'
        else
          node_color = '#ca8989'
        const __graph_json_data = {
          nodes: [
            {
              id: this.nodeName,
              name: this.nodeName,
              color: node_color,
              x: (graph.getNodes().length + 4) * 150,
              y: 200,
            }
          ],
          links: [
            {from: this.currentNode.id, to: this.nodeName, text: '产生'}
          ]
        };
        graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
          this.$notification.open({
            title: '成功添加功能部件',
            type: 'success',
            message: '添加功能部件：' + this.nodeName
          })
          this.nodeName = ''
          this.radio = ''
          this.visible = false
          this.graphs.nodes.push(__graph_json_data.nodes[0])
          this.graphs.links.push(__graph_json_data.links[0])
          this.selectingNode = false
          this.checkContradiction(this.currentNode)
          sessionStorage.setItem('graph', JSON.stringify(this.graphs))
        })
      },

      addNewNode() {
        if (this.nodeName === '' || this.radio === ''||this.nodeName.split(" ").join("").length === 0){
          this.$message.error('请完善节点信息');
          return
        }
        for (let i = 0; i < this.graphs.nodes.length; i++){
          if (this.nodeName === this.graphs.nodes[i].name){
            this.$message.error('该功能部件已存在');
            return
          }
        }
        const graph = this.$refs.seeksRelationGraph;
        let node_color = '';
        if (this.radio === 1)
          node_color = '#89B8CA'
        else
          node_color = '#ca8989'
        const __graph_json_data = {
          nodes: [
            {
              id: this.nodeName,
              name: this.nodeName,
              color: node_color,
              x: (graph.getNodes().length + 4) * 150,
              y: 200,
            }
          ],
          links: [
            {from: 'root', to: this.nodeName, text: '需要'}
          ]
        };
        graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
          this.$notification.open({
            title: '成功添加功能部件',
            type: 'success',
            message: '添加功能部件：' + this.nodeName
          })
          this.nodeName = ''
          this.radio = ''
          this.visible = false
          this.graphs.nodes.push(__graph_json_data.nodes[0])
          this.graphs.links.push(__graph_json_data.links[0])
          this.selectingNode = false
          sessionStorage.setItem('graph', JSON.stringify(this.graphs))
        })
      },

      editNode() {
        if (this.nodeName === '' || this.radio === ''||this.nodeName.split(" ").join("").length === 0){
          this.$message.error('请完善节点信息');
          return
        }
        for (let i = 0; i < this.graphs.nodes.length; i++){
          if (this.currentNode.id !== this.graphs.nodes[i].id &&
            this.nodeName === this.graphs.nodes[i].name)
          {
            this.$message.error('该功能部件已存在');
            return
          }
        }
        const graph = this.$refs.seeksRelationGraph;
        let node_color = '';
        if (this.radio === 1)
          node_color = '#89B8CA'
        else
          node_color = '#ca8989'

        for (let i = 0; i < this.graphs.nodes.length; i++){
          if (this.currentNode.id === this.graphs.nodes[i].id){
            this.graphs.nodes[i].id = this.nodeName
            this.graphs.nodes[i].name = this.nodeName
            this.graphs.nodes[i].color = node_color
            this.graphs.nodes[i].text = this.nodeName
          }
        }
        for (let i = 0; i < this.graphs.links.length; i++){
          if (this.currentNode.id === this.graphs.links[i].from){
            this.graphs.links[i].from = this.nodeName
          }
          if (this.currentNode.id === this.graphs.links[i].to){
            this.graphs.links[i].to = this.nodeName
          }
        }
        this.$refs.seeksRelationGraph.setJsonData(this.getUsableData(this.graphs))
        sessionStorage.setItem('graph',JSON.stringify(this.getUsableData(this.graphs)))
        this.visible = false
        this.selectingNode = false
      },

      addNewRelation() {
        if (this.selectedNodes.length === 0){
          this.$message.error('请选择关联节点');
          return
        }
        for (let i = 0; i < this.selectedNodes.length; i++){
          const graph = this.$refs.seeksRelationGraph;
          const __graph_json_data = {
            nodes: [],
            links: [
              {from: this.currentNode.id, to: this.selectedNodes[i].key, text: '产生'}
            ]
          };
          graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
            // 这些写上当图谱初始化完成后需要执行的代码
            this.$notification.open({
              title: '成功添加关系',
              type: 'success',
              message: '添加关系：' + graph.getNodeById(this.currentNode.id).text + ' 产生 ' + graph.getNodeById(this.selectedNodes[i].key).text
            })
            this.selectVisible = false
            this.graphs.links.push(__graph_json_data.links[0])
            this.checkContradiction(this.currentNode)
            this.selectingNode = false
            sessionStorage.setItem('graph', JSON.stringify(this.graphs))
          })
        }
        this.selectedNodes = []
      },

      getPosNodes(nodeObject){
        // 找后置节点
        let posNodes = []

        // 可见的连接
        let visibleLinks = []
        for (let i = 0; i < this.graphs.links.length; i++){
          if (this.graphs.links[i].isHide !== true){
            visibleLinks.push(this.graphs.links[i])
          }
        }
        for (let i = 0; i < visibleLinks.length; i++){
          if (visibleLinks[i].from === nodeObject.id){
            posNodes.push(visibleLinks[i].to)
          }
        }
        return posNodes
      },

      getFrontNodes(nodeObject){
        // 找前置节点
        let frontNodes = []

        // 可见的连接
        let visibleLinks = []
        for (let i = 0; i < this.graphs.links.length; i++){
          if (this.graphs.links[i].isHide !== true){
            visibleLinks.push(this.graphs.links[i])
          }
        }
        for (let i = 0; i < visibleLinks.length; i++){
          if (visibleLinks[i].to === nodeObject.id){
            frontNodes.push(visibleLinks[i].from)
          }
        }
        return frontNodes
      },

      checkContradiction(changeNode){
        let posNodes = this.getPosNodes(changeNode)
        let nodeColor = changeNode.color
        let graph = this.$refs.seeksRelationGraph
        let con1 = 0
        let con2 = 0
        for (let i = 0; i < posNodes.length; i++){
          if (nodeColor === graph.getNodeById(posNodes[i]).color) {
            con1 = 1
            break
          }
        }
        for (let i = 0; i < posNodes.length; i++){
          if (nodeColor !== graph.getNodeById(posNodes[i]).color) {
            con2 = 1
            break
          }
        }
        const h = this.$createElement;
        if (con1 === 0 && con2 === 1){
          this.$message.warn({ content: '出现物理冲突点：' + changeNode.text,
            icon: () =>
              h("a-icon", {
                props: {
                  type: "pushpin"
                }
              }),
            top: '100px',
            duration: 5
            });
        }
        else if (con1 === 1 && con2 === 1){
          this.$message.warn({ content: '出现技术冲突点：' + changeNode.text,
            icon: () =>
              h("a-icon", {
                props: {
                  type: "pushpin"
                }
              }),
            top: '100px',
            duration: 5
          });
        }
      },

      handleChange(selectedNodes) {
        this.selectedNodes = selectedNodes;
      },

      array_contain(array, obj){
        for (let i = 0; i < array.length; i++){
          if (array[i] === obj)     //如果要求数据类型也一致，这里可使用恒等号===
            return true;
        }
        return false;
      },

      showAddNodeModel() {
        this.type = 0
        this.nodeName = ''
        this.radio = ''
        this.visible = true
      },

      showAddRelationModel(){
        this.selectableNodes = JSON.parse(sessionStorage.getItem('selectableNodes'))
        this.selectVisible = true
      },

      showPostpositionModel() {
        this.type = 1
        this.nodeName = ''
        this.radio = ''
        this.visible = true
      },

      showEditNodeModel(){
        this.type = 2
        this.nodeName = this.currentNode.text
        if (this.currentNode.color === '#89B8CA')
          this.radio = 1
        else
          this.radio = 2
        this.visible = true
      },

      handleAddNode(){
        if (this.type === 0)
          this.addNewNode()
        else if (this.type === 1)
          this.addPostposition()
        else if (this.type === 2)
          this.editNode()
      },

      focusOnNode(node){
        this.$refs.seeksRelationGraph.focusNodeById(node)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .c-mini-toolbar[data-v-3cfdb1cf]{
    z-index: 10 !important;
  }
  .v-btn-toggle--group > .v-btn.v-btn{
    margin: 0 !important;
  }
  .c-mb-button[data-v-3cfdb1cf]{
    color: #89B8CA !important;
  }
  .v-dialog{
    box-shadow: none !important;
  }
</style>
